<template>
  <view class="commonInput">
    <view class="input">
      <textarea style="min-height: 100px" class="input_li" v-model="value" :type="type" :placeholder="placeholder" placeholder-class="pcs" v-if="type === 'textarea'"></textarea>
      <input class="input_li" v-else v-model="value" :type="type" :placeholder="placeholder" placeholder-class="pcs" />
    </view>
    <view class="footerBtn">
      <button type="primary" class="footerBtn_li" v-on:click="onSubmit">完成</button>
    </view>
  </view>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      placeholder: null,
      type: null,
      key: null,
      api: null,
      value: null
    }
  },
  methods: {

    /**
     * 页面加载
     * @param e
     */
    afterLoad (e) {
      this.placeholder = e.placeholder
      this.type = e.type
      this.key = e.key
      this.api = e.api
      this.value = e.value

      uni.setNavigationBarTitle({
        title: e.title
      })
    },

    /**
     *
     */
    onSubmit () {
      let self = this
      switch (self.api) {
        case "updateInfoVal":
          this.$api.updateUserInfoByKey({
            key: self.key,
            val: self.value,
            type: self.type
          }, {
            loading: true
          }).then(async(res) => {
            await self.refreshUserInfo()
            uni.navigateBack()
          })
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.commonInput{
  .input{
    width: calc(100% - 40px);
    padding: 20px;
    .input_li{
      height: 40px;
      width: 100%;
      border: 0;
      background: transparent;
      outline: none;
      border-bottom: 1px solid $border-bc;
      &:focus,
      &:active{
        border-color: $primary !important;
      }
    }
    .pcs{
      font-size: 12px;
    }
  }
  .footerBtn{
    background: transparent;
  }
}
</style>
